<template>
  <el-col>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name"  label="文件名">
        <template slot-scope="scope">
          <span>
            <i class="el-icon-delete"></i>
            <span style="margin-left: 10px">{{ scope.row.name }}</span>
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="size" label="大小"></el-table-column>
      <el-table-column prop="time" label="日期">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{dateChange(scope.row.time)}}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" >
        <template slot-scope="scope">
          <el-dropdown>
            <span class="el-dropdown-link">
              ....
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <span @click="recoverfile(scope.row)">恢复</span>
              </el-dropdown-item>
              <el-dropdown-item>
                <span @click="truedelfile(scope.row)">删除</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible1"
      width="30%"
      :before-close="handleClose"
      modal-append-to-body="false"
    >
      <span>{{'确认恢复'+file.name+'?'}}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmitRecover()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="警告"
      :visible.sync="dialogVisible2"
      width="30%"
      :before-close="handleClose"
      modal-append-to-body="false"
    >
      <span>{{'确认删除「'+file.name+'」?,删除后彻底不可恢复'}}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="danger" @click="onSubmitDelete()">确 定</el-button>
      </span>
    </el-dialog>
  </el-col>
</template>


<script>
export default {
  data() {
    return {
      tableData: [],
      file: "",
      dialogVisible2: false,
      dialogVisible1: false
    };
  },
  methods: {
    dateChange(javaDate) {
      if (javaDate) {
        return javaDate.substr(0, 10).replace(/-/g, "/");
      } else {
        return "";
      }
    },
    onSubmitDelete() {
      this.$http
        .delete("/api_file/file/truedel?id=" + this.file.id)
        .then(async res => {
          if (res.data.status == 200) {
            const { data: res } = await this.$http.get(
              "/api_file/file/getDelTb"
            );
            this.tableData = res;
            this.dialogVisible2 = false;
            this.$message.success(
              "删除:「" + this.file.name + "」成功不可在复原"
            );
          } else {
            return this.$message.error(
              "删除:" + this.file.name + res.data.message
            );
          }
        });
    },
    onSubmitRecover() {
      this.$http
        .get("/api_file/file/recover?id=" + this.file.id)
        .then(async res => {
          if (res.data.status == 200) {
            const { data: res } = await this.$http.get(
              "/api_file/file/getDelTb"
            );
            this.tableData = res;
            this.dialogVisible1 = false;
            this.message("恢复「" + this.file.name + "」成功", true);
          } else {
            this.dialogVisible = false;
            this.message("恢复「" + this.file.name + "失败", false);
          }
        });
    },
    message(message, flag) {
      if (flag) {
        this.$message.success(message);
      } else {
        this.$message.error(message);
      }
    },
    recoverfile(file) {
      this.file = file;
      this.dialogVisible1 = true;
    },
    truedelfile(file) {
      this.file = file;
      this.dialogVisible2 = true;
    }
  },
  async created() {
    const { data: res } = await this.$http.get("/api_file/file/getDelTb");
    this.tableData = res;
  }
};
</script>

<style>
</style>